import { Component, OnInit } from '@angular/core';
import { Hero } from './hero';
import { HeroService } from './hero.service';
//
@Component({
	selector: 'my-app',
	//template: '<h1>{{title}}</h1><h2>{{hero.name}}</h2><div><label>NO:{{hero.id}}</label></div><div><label>name:{{hero.name}}</label></div>'
	/*
	template:`
	  <h1>{{title}}</h1>
	  <h2>{{hero.name}} details!</h2>
	  <div><label>id: </label>{{hero.id}}</div>
	  <div>
	    <label>name: </label>
	    <input [(ngModel)]="hero.name" placeholder="name">
	  </div>
	  `

	  template:`
			<h1>{{title}}列表</h1>
			<ul class="heroes">
				<li *ngFor="let hero of heroes" (click)="onSelect(hero)" [class.selected]="hero === selectedHero">
				<span class="badge">{{hero.id}}</span> {{hero.name}}
			</ul>
			<div *ngIf="selectedHero">
			<h2>{{selectedHero.name}} details!</h2>
			<div><label>id: </label>{{selectedHero.id}}</div>
			<div>
			    <label>name: </label>
			    <input [(ngModel)]="selectedHero.name" placeholder="name"/>
			</div>
			</div>
	  `,
	  	  */
	template: `
			<h1>{{title}}列表</h1>
			<ul class="heroes">
				<li *ngFor="let hero of heroes" (click)="onSelect(hero)" [class.selected]="hero === selectedHero">
				<span class="badge">{{hero.id}}</span> {{hero.name}}
			</ul>
			<my-hero-detail [hero]="selectedHero"></my-hero-detail>
	  `,
	styles: [`
				  .selected {
				    background-color: #CFD8DC !important;
				    color: white;
				  }
				  .heroes {
				    margin: 0 0 2em 0;
				    list-style-type: none;
				    padding: 0;
				    width: 15em;
				  }
				  .heroes li {
				    cursor: pointer;
				    position: relative;
				    left: 0;
				    background-color: #EEE;
				    margin: .5em;
				    padding: .3em 0;
				    height: 1.6em;
				    border-radius: 4px;
				  }
				  .heroes li.selected:hover {
				    background-color: #BBD8DC !important;
				    color: white;
				  }
				  .heroes li:hover {
				    color: #607D8B;
				    background-color: #DDD;
				    left: .1em;
				  }
				  .heroes .text {
				    position: relative;
				    top: -3px;
				  }
				  .heroes .badge {
				    display: inline-block;
				    font-size: small;
				    color: white;
				    padding: 0.8em 0.7em 0 0.7em;
				    background-color: #607D8B;
				    line-height: 1em;
				    position: relative;
				    left: -1px;
				    top: -4px;
				    height: 1.8em;
				    margin-right: .8em;
				    border-radius: 4px 0 0 4px;
				  }
				`],
	providers: [HeroService]
})

export class AppComponent implements OnInit {

	title = '英雄';
	//hero:Hero={id:1,name:'IRON MAN'};
	//heroes:Hero[]=HEROES;
	heroes: Hero[];
	selectedHero: Hero;

	ngOnInit(): void {
		this.getHeroes();
	}

	constructor(private heroService: HeroService) {
	}

	onSelect(hero: Hero): void {
		this.selectedHero = hero;
	};
	/*初使化*/
	getHeroes(): void {
		// this.heroes = this.heroService.getHeroes();
		//this.heroService.getHeroesByPromise().then(heroes => this.heroes = heroes);
		this.heroService.getHeroesSlowly().then(heroes => this.heroes = heroes);
	}

}